<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="https://www.12371.cn/mydsjd/h5/css/style2.css"/>
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://www.12371.cn/mydsjd/h5/js/jquery-1.10.2.js"></script>
    <script src="https://www.12371.cn/mydsjd/h5/js/html2canvas.min.js"></script>
    <script src="https://www.12371.cn/mydsjd/h5/js/wxshare.js"></script>
    <title>党史天天学 | 知识竞答</title>
</head>
<!-- 规则 -->
<style>
     * {
        margin: 0;
        padding: 0;
    }

    .tcc {
        display: none;
        width: 7.5rem;
        height: 0;
        background: #fff;
        height: 18rem;
        z-index: 99;
        position: relative;
        bottom: -18rem;
        overflow: hidden;
    }

    .tcc .ht {
        width: 0.3rem;
        height: 0.3rem;
        background: url('https://www.12371.cn/mydsjd/h5/img/ht.png') no-repeat;
        float: right;
        background-size: 100%;
        margin: 0.4rem 0.4rem 0 0;
    }

    p {
	text-indent: 2em;
        margin: 0 auto;
        font: 0.36rem '微软雅黑';
        color: #666;
        line-height: 0.6rem;
    }

    .tit_col {
        color: #000;
    }

    p.tit_col {
        font: 0.38rem '微软雅黑';
    }
    .dsdt_share_mask {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        z-index: 33;
        box-sizing: border-box;
    }

    .dsdt_share_style {
        width: 7.5rem;
        height: 11rem;
        box-sizing: border-box;
        position: relative;
    }
    .fixed_img {
        width: 7.5rem;
        height: 11rem;
        position: absolute;
        left: 0;
        top: 0;
    }
    .dsdt_sm_content {
        width: 6.24rem;
        height: 5.42rem;
        position: absolute;
        bottom: 1.12rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .dsdt_user_icon {
        width: 1.56rem;
        height: 1.56rem;
        padding: 0.04rem;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }

    .dsdt_user_icon>img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        margin-left: 0.02rem;
        margin-top: 0.01rem;
    }

    .dsdt_user_name {
        margin-top: 0.19rem;
        font-size: 0.28rem;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: center;
        color: #5f4811;
        height: 0.28rem;
        line-height: 0.28rem;
        width: 100%;
        text-indent: 0;
    }

    .dsdt_star_box {
        height: 0.5rem;
        margin-top: 0.27rem;
        margin-left: 2.37rem;
        display: flex;
        align-items: center;
    }

    .dsdt_star_img {
        display: block;
        width: 0.45rem;
        height: 0.43rem;
        margin-right: 0.14rem;
        background-image: url("{{asset('h5/img/dsdt_star.png') }}");
        background-size: 100% 100%;
    }

    .grey_star {
        background-image: url("{{asset('h5/img/dsdt_star_grey.png') }}");
    }

    .dsdt_energy_box {
        width: 2.8rem;
        height: 0.5rem;
        margin-top: 0.27rem;
        margin-left: 2.37rem;
        opacity: 1;
        background: #ffeb99;
        border-radius: 0.2rem;
    }

    .dsdt_energy_box>p {
        font-size: 0.36rem;
        font-family: Arial, Arial-Regular;
        font-weight: 400;
        text-align: center;
        color: #83422b;
        line-height: 0.51rem;
        width: 100%;
        text-indent: 0;
    }

    .dsdt_qgpm_box {
        width: 2.8rem;
        height: 0.5rem;
        margin-left: 2.37rem;
        margin-top: 0.2rem;
        font-size: 0.36rem;
        font-family: Arial, Arial-Regular;
        font-weight: 400;
        text-align: center;
        color: #ba3608;
        line-height: 0.39rem;
        text-indent: 0;
    }

    .img-box {
        width: 96%;
        margin-left: 2%;
        margin-top: 10%;
    }

    .tips {
        margin-top: 0.1rem;
        text-align: center;
        color: #fff;
        font-size: 0.3rem;
    }

    .img-box img {
        width: 100%;
    }
    .body{
        height: 100vh;
    }
</style>
<body>
<script>
    var deviceWidth = document.documentElement.clientWidth;
    if (deviceWidth > 750) {
       // document.documentElement.style.fontSize = 750 / 7.50 + "px";
	document.documentElement.style.fontSize=deviceWidth/7.50+"px";
    } else {
        document.documentElement.style.fontSize = deviceWidth / 7.50 + "px";
    }
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    handleFontSize();
    } else {
    if (document.addEventListener) {
    　　　　document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    　　} else if (document.attachEvent) {
    　　　　document.attachEvent("WeixinJSBridgeReady", handleFontSize);
    　　　　document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
    　　}
    }
    function handleFontSize() {
    　　// 设置网页字体为默认大小
    　　WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
    　　// 重写设置网页字体大小的事件
    　　WeixinJSBridge.on('menu:setfont', function () {
        WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
    });
    }
</script>

<div class="body">
    <div class="nav">
        <ul>
            <li class="one">
                <a href="{{ route('index') }}"></a>
            </li>
            <li class="two">
                <a href="{{ route('grade') }}">我的战绩</a>
            </li>
            <li class="thr">
                <a href="{{ route('guide') }}">规则说明</a>
            </li>
        </ul>
    </div>
    <div style="clear: both;"></div>
    <div class="numb">
        <div>{{ $user->score }}</div>
        <span>排名：{{ $userRank }}</span>
        <a href="{{ route('rank') }}">学习成绩</a>
    </div>
    <ul class="drdj">
        <li class="{{ $user->score >= 1000 ? 'cur' : '' }} fir"></li>
        <li class="{{ $user->score >= 2000 ? 'cur' : '' }}"></li>
        <li class="{{ $user->score >= 3000 ? 'cur' : '' }}"></li>
        <li class="{{ $user->score >= 4000 ? 'cur' : '' }}"></li>
        <li class="{{ $user->score >= 5000 ? 'cur' : '' }}"></li>
        <li class="last">分享</li>
    </ul>
</div>


<!-- 分享图片 -->
<div class="container">
    <div class="dsdt_share_mask" style="display: none;">
        <div class="img-box" id="ibox">
            <img src="" alt="">
            <div class="tips"></div>
        </div>
    </div>

</div>


<div class="dsdt_share_style" id="dsdt_share_style" style="display:none;">
    <img class="fixed_img" src="{{ asset('h5/img/dsdt_share_bg.png') }}" alt="">
    <div class="dsdt_sm_content">
        <!-- 头像 -->
        <div class="dsdt_user_icon">
            <img src="{{ $user->weChatUser ? $user->weChatUser->avatar : asset('img/avatar.png') }}" alt="">
        </div>
        <p class="dsdt_user_name">{{ $user->name}}</p>
        <div class="dsdt_star_box">
            <div class="{{ $user->score >= 1000 ? 'dsdt_star_img' : 'dsdt_star_img grey_star' }}"></div>
            <div class="{{ $user->score >= 2000 ? 'dsdt_star_img' : 'dsdt_star_img grey_star' }}"></div>
            <div class="{{ $user->score >= 3000 ? 'dsdt_star_img' : 'dsdt_star_img grey_star' }}"></div>
            <div class="{{ $user->score >= 4000 ? 'dsdt_star_img' : 'dsdt_star_img grey_star' }}"></div>
            <div class="{{ $user->score >= 5000 ? 'dsdt_star_img' : 'dsdt_star_img grey_star' }}"></div>
        </div>
        <div class="dsdt_energy_box">
            <p>{{$user->score}}</p>
        </div>
        <p class="dsdt_qgpm_box">{{ $userRank }}</p>
    </div>
</div>

<div class="tcc">
    <div class="ht"></div>
    <div style="clear: right;"></div>
    <p class="tit_col">答题规则</p>
    <p>答题方式分为“单人自测”和“双人对战”。</p>
   <p><span class="tit_col">1. “单人自测”</span>，每次由系统随机抽取<span class="tit_col">15</span>道题，答题限时<span class="tit_col">10</span>分钟。每答对<span class="tit_col">1</span>题获得<span class="tit_col">1</span>点能量值，答错不得分、不扣分。答题完毕后，点击“提交”按钮，获得相应能量值。每天答题次数不限，但仅前10次答题可获得能量值。
    </p>
    <p><span class="tit_col">2.“双人对战”</span>，每次<span class="tit_col">5</span>道题，每道题限时<span
            class="tit_col">15</span>秒，根据双方答题准确率及速度进行比拼，获胜方获得<span class="tit_col">5</span>点能
量值，失败方获得<span      class="tit_col">1</span>点能量值。参与者可通过微信邀请好友参与比拼，也可由系统随机匹配对手。每天挑战次数不限，但仅前10次答题可获得能量值。
    </p>
    <p>参与者根据累计能量值，可获不同等级的“达人”称号，并通过微信分享答题成绩。能量值达到<span class="tit_col">1000</span>点为“一星达人”，达到<span
            class="tit_col">2000</span>点为“二星达人”，达到<span class="tit_col">3000</span>点为“三星达人”，达到<span
           class="tit_col">4000</span>点为“四星达人”，达到<span class="tit_col">5000</span>点为“五星达人”。活动结束后，将为能量值总排名前<span
            class="tit_col">1000</span>位者发放纪念证书。</p>
</div>
<script>
	var title = '我在“党史天天学”知识竞答中排名第{{ $userRank }}，快来挑战我吧！';
	getShare(title);

    // 生成图片js
    function saveImage() {
        var domElement = document.querySelector('#dsdt_share_style');
        var canvasContent = domElement;  //需要截图的包裹的（原生的）DOM对象


        var cwidth = canvasContent.offsetWidth;  //获取dom宽度

        var cheight = canvasContent.offsetHeight;  //获取dom高度


        var canvas = document.createElement('canvas');  //创建一个canvas节点

        var scale = 3  //定义任意放大倍数，支持小数
        canvas.width = cwidth * scale;  //定义canvas宽度*缩放

        canvas.height = cheight * scale;  //定义canvas高度*缩放

        canvas.getContext("2d").scale(scale, scale);  //获取context,设置scale


        var opts = {
            scale: scale,
            // 添加的scale 参数
            canvas: canvas,
            //自定义 canvas
            logging: false,
            //日志开关，便于查看html2canvas的内部执行流程
            width: cwidth,
            //dom 原始宽度
            height: cheight,
            useCORS: true  // 【重要】开启跨域配置,

        }


        html2canvas(canvasContent, opts).then(function (canvas) {
            var context = canvas.getContext('2d');             // 【重要】关闭抗锯齿

            context.mozImageSmoothingEnabled = false;
            context.webkitImageSmoothingEnabled = false;
            context.msImageSmoothingEnabled = false;
            context.imageSmoothingEnabled = false;

            $('.dsdt_share_style').hide();
            var img = document.createElement("img");
            $("#ibox img").attr('src', canvas.toDataURL("png", 1.0));

            $('.tips').text('长按保存图片');
        });


    }
    $(function() {
        $('.tcc .ht').on('click', function () {
            $('.body').show()
            $('.tcc').hide()
            $(".tcc").animate({bottom: '-18rem'});
        })
        $('.nav .thr a').on('click', function (e) {
            e.preventDefault()
            $('.body').hide()
            $('.tcc').show()
            $(".tcc").animate({bottom: 0});
        })
        // 点击分享按钮---生成图片
        $('.last').click(function () {
            $('.dsdt_share_mask').show();
            $('.dsdt_share_style').show();
            saveImage();
        })
        // 点击灰色区域---关闭弹窗
        $('.dsdt_share_mask').mouseup(function (e) {
            var _con = $('.img-box'); // 设置目标区域
            if (!_con.is(e.target) && _con.has(e.target).length === 0) {
                $('.dsdt_share_mask').hide();
            };
        })

    });

</script>
<!-- end -->

<script>
var pagecode="T-003-000-000";
with(document)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("exparams","v_id=&aplus&page_code="+pagecode,id="tb-beacon-aplus",src=(location>"https"?"//js":"//js")+".data.cctv.com/__aplus_plugin_cctv.js,aplus_plugin_aplus_u.js")
</script>
</body>
</html>
